<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="getSelectVal"
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column prop="id" label="	id"></el-table-column>
      <el-table-column prop="brand" label="品牌"></el-table-column>
      <el-table-column prop="materialName" label="物料名称"></el-table-column>
      <el-table-column prop="model" label="规格型号"></el-table-column>
      <el-table-column prop="oneTypeName" label="大类分类名称">
      </el-table-column>
      <el-table-column
        prop="towTypeName"
        label="中类分类名称"
      ></el-table-column>
    </el-table>
    <div style="display: flex; justify-content: space-between">
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <div>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
        <el-button
          size="small"
          type="primary"
          @click="$emit('update:visible', false)"
          >取消</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getMaterialList } from "@/api/system/purchase";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      total: 0,
      rowList: [],
    };
  },
  methods: {
    //分页器size
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    },
    //分页器当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDataList();
    },
    getSelectVal(val) {
      this.rowList = val;
    },
    submit() {
      if (this.rowList.length) {
        this.$emit("update:visible", false);
        this.$emit("getSelectVal", this.rowList);
      } else {
        this.$message.warning("请至少选择一项");
      }
    },
    getDataList() {
      getMaterialList({
        type: 1,
        page: this.currentPage,
        limit: this.pageSize,
      }).then((res) => {
        this.tableData = res.data.records;
      });
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style></style>
